<template>
	<view class="amap-wrapper">
		<!-- H5平台使用web-view -->
		<!-- #ifdef H5 -->
		<div :id="mapId" class="amap-container"></div>
		<!-- #endif -->
		
		<!-- 小程序平台使用map组件 -->
		<!-- #ifndef H5 -->
		<map 
			:id="mapId"
			class="amap-container"
			:latitude="center.latitude"
			:longitude="center.longitude"
			:scale="scale"
			:markers="markers"
			:show-location="showLocation"
			@tap="onMapTap"
			@markertap="onMarkerTap"
			@regionchange="onRegionChange"
		></map>
		<!-- #endif -->
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

// Props
const props = defineProps({
	// 地图中心点
	center: {
		type: Object,
		default: () => ({
			latitude: 39.90923,
			longitude: 116.397428
		})
	},
	// 缩放级别
	scale: {
		type: Number,
		default: 13
	},
	// 是否显示用户位置
	showLocation: {
		type: Boolean,
		default: true
	},
	// 标记点数组
	markers: {
		type: Array,
		default: () => []
	}
})

// Emits
const emit = defineEmits(['map-ready', 'location-change', 'marker-tap', 'map-error', 'update:center', 'update:scale'])

// 数据
const mapId = ref('amap-' + Date.now())
const mapInstance = ref(null)

// 监听标记变化
watch(() => props.markers, () => {
	console.log('标记数据变化:', props.markers)
	// #ifdef H5
	updateWebMarkers()
	// #endif
}, { deep: true })

// 监听地图中心变化
watch(() => props.center, (newCenter) => {
	if (mapInstance.value) {
		// #ifdef H5
		if (mapInstance.value.setCenter) {
			mapInstance.value.setCenter([newCenter.longitude, newCenter.latitude])
		}
		// #endif
		
		// #ifndef H5
		// 小程序平台会自动响应center属性变化
		// #endif
	}
}, { deep: true })

// 方法
const initMap = () => {
	// #ifdef H5
	initWebMap()
	// #endif
	
	// #ifndef H5
	initNativeMap()
	// #endif
}

// H5平台初始化地图
const initWebMap = () => {
	// 加载高德地图JS API
	if (typeof AMap === 'undefined') {
		loadAMapScript().then(() => {
			createWebMap()
		}).catch(error => {
			console.error('地图加载失败:', error)
			emit('map-error', error)
		})
	} else {
		createWebMap()
	}
}

// 加载高德地图脚本
const loadAMapScript = () => {
	return new Promise((resolve, reject) => {
		console.log('开始加载高德地图脚本...')
		const script = document.createElement('script')
		script.src = `https://webapi.amap.com/maps?v=2.0&key=0c9a807ee106aa3d81087505920a86d1&callback=initAMapCallback`
		script.async = true
		
		window.initAMapCallback = () => {
			console.log('高德地图脚本加载成功')
			resolve()
		}
		
		script.onerror = (error) => {
			console.error('高德地图脚本加载失败:', error)
			reject(new Error('高德地图加载失败'))
		}
		
		script.onload = () => {
			console.log('高德地图脚本文件加载完成')
		}
		
		document.head.appendChild(script)
	})
}

// 创建Web地图
const createWebMap = () => {
	mapInstance.value = new AMap.Map(mapId.value, {
		zoom: props.scale,
		center: [props.center.longitude, props.center.latitude],
		viewMode: '2D'
	})
	
	mapInstance.value.on('complete', () => {
		console.log('H5地图初始化完成')
		emit('map-ready', mapInstance.value)
		// 地图初始化完成后，添加已有的标记
		updateWebMarkers()
	})
}

// 存储Web端的标记实例
const webMarkers = ref([])

// 更新Web端标记
const updateWebMarkers = () => {
	// #ifdef H5
	if (mapInstance.value && typeof AMap !== 'undefined') {
		// 清除旧标记
		webMarkers.value.forEach(marker => {
			mapInstance.value.remove(marker)
		})
		webMarkers.value = []
		
		// 添加新标记
		props.markers.forEach(markerData => {
			const aMapMarker = new AMap.Marker({
				position: [markerData.longitude, markerData.latitude],
				title: markerData.title || '',
				content: createMarkerContent(markerData)
			})
			
			// 如果有callout信息，创建信息窗口
			if (markerData.callout) {
				const infoWindow = new AMap.InfoWindow({
					content: markerData.callout.content,
					offset: new AMap.Pixel(0, -30)
				})
				
				// 如果设置为始终显示
				if (markerData.callout.display === 'ALWAYS') {
					infoWindow.open(mapInstance.value, aMapMarker.getPosition())
				}
				
				aMapMarker.on('click', () => {
					infoWindow.open(mapInstance.value, aMapMarker.getPosition())
				})
			}
			
			mapInstance.value.add(aMapMarker)
			webMarkers.value.push(aMapMarker)
		})
		
		console.log('H5端已添加标记数量:', webMarkers.value.length)
	}
	// #endif
}

// 创建标记内容
const createMarkerContent = (markerData) => {
	if (markerData.id === 'current-location') {
		// 用户位置标记使用绿色圆点
		return `<div style="
			width: 20px;
			height: 20px;
			background: #4CAF50;
			border: 3px solid #fff;
			border-radius: 50%;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		"></div>`
	} else {
		// 港口标记使用蓝色图标
		return `<div style="
			width: 30px;
			height: 30px;
			background: #2196F3;
			border: 2px solid #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 16px;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		">🚢</div>`
	}
}

// 小程序平台初始化
const initNativeMap = () => {
	// 获取map组件实例
	const mapContext = uni.createMapContext(mapId.value)
	mapInstance.value = mapContext
	
	// 延迟触发ready事件，确保map组件已渲染
	setTimeout(() => {
		emit('map-ready', mapContext)
	}, 500)
}

// 地图点击事件
const onMapTap = (e) => {
	console.log('地图点击:', e)
}

// 标记点击事件
const onMarkerTap = (e) => {
	emit('marker-tap', e)
}

// 地图区域改变事件
const onRegionChange = (e) => {
	if (e.type === 'end') {
		emit('location-change', {
			latitude: e.detail.centerLocation.latitude,
			longitude: e.detail.centerLocation.longitude,
			scale: e.detail.scale
		})
	}
}

// 公共方法
const setCenter = (longitude, latitude) => {
	// #ifdef H5
	if (mapInstance.value && mapInstance.value.setCenter) {
		mapInstance.value.setCenter([longitude, latitude])
	}
	// #endif
	
	// #ifndef H5
	if (mapInstance.value && mapInstance.value.moveToLocation) {
		mapInstance.value.moveToLocation({
			longitude,
			latitude
		})
	}
	// #endif
}

const addMarker = (marker) => {
	// #ifdef H5
	if (mapInstance.value && typeof AMap !== 'undefined') {
		const aMapMarker = new AMap.Marker({
			position: [marker.longitude, marker.latitude],
			title: marker.title || '',
			content: createMarkerContent(marker)
		})
		mapInstance.value.add(aMapMarker)
		webMarkers.value.push(aMapMarker)
		console.log('H5端手动添加标记:', marker)
	}
	// #endif
	
	// #ifndef H5
	// 小程序平台通过props.markers传递标记
	console.log('小程序端添加标记:', marker)
	// #endif
}

const getCurrentLocation = () => {
	return new Promise((resolve, reject) => {
		// #ifdef H5
		// H5环境使用浏览器原生定位API
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(
				(position) => {
					console.log('浏览器定位成功:', position.coords)
					const lat = position.coords.latitude
					const lng = position.coords.longitude
					const result = {
						latitude: lat,
						longitude: lng,
						accuracy: position.coords.accuracy
					}
					resolve(result)
				},
				(error) => {
					console.error('浏览器定位失败:', error)
					reject({
						code: error.code,
						message: error.message || '定位失败'
					})
				},
				{
					enableHighAccuracy: true,
					timeout: 15000,
					maximumAge: 60000
				}
			)
		} else {
			console.warn('浏览器不支持定位')
			reject({
				code: -1,
				message: '浏览器不支持定位功能'
			})
		}
		// #endif
		
		// #ifndef H5
		// 小程序环境使用uni.getLocation
		uni.getLocation({
			type: 'gcj02',
			altitude: true,
			success: (res) => {
				console.log('小程序定位成功:', res)
				resolve({
					latitude: res.latitude,
					longitude: res.longitude,
					accuracy: res.accuracy
				})
			},
			fail: (err) => {
				console.error('小程序定位失败:', err)
				reject({
					code: err.errCode || -1,
					message: err.errMsg || '定位失败'
				})
			}
		})
		// #endif
	})
}

// 移动地图到指定位置
const moveToLocation = (location) => {
	console.log('移动地图到位置:', location)
	
	// #ifdef H5
	if (mapInstance.value) {
		// H5环境下，高德地图API移动到指定位置
		mapInstance.value.setCenter([location.longitude, location.latitude])
		mapInstance.value.setZoom(16)
	}
	// #endif
	
	// #ifndef H5
	// 小程序环境下，通过修改props来移动地图
	emit('update:center', {
		latitude: location.latitude,
		longitude: location.longitude
	})
	emit('update:scale', 16)
	// #endif
}

// 生命周期
onMounted(() => {
	initMap()
})

onUnmounted(() => {
	// #ifdef H5
	if (mapInstance.value && mapInstance.value.destroy) {
		mapInstance.value.destroy()
	}
	// #endif
})

// 暴露方法给父组件
defineExpose({
	initMap,
	setCenter,
	addMarker,
	getCurrentLocation,
	updateWebMarkers,
	moveToLocation,
	getMapInstance: () => mapInstance.value
})
</script>

<style scoped>
.amap-wrapper {
	width: 100%;
	height: 100%;
}

.amap-container {
	width: 100%;
	height: 100%;
}
</style> 